<template lang="pug">
div
  g-h.header(j-c="center" a-i="center")
    div.header-title {{ $root.User.realName }}

  g-v
    router-link.link(to="/app/password")
      div 修改密码
      icon-forward
    //- router-link.link(to="/app/about")
      div 关于
      icon-forward
    div.link(@click="clearCache")
      div 清除缓存
    div.link
      div 版本 {{ version }}

  div.logout(@click="logout") 退出登录
</template>

<script>
import api from "$api"
import util from "$util"

export default {
  data() {
    return {
      version: api.APP_VERSION,
    }
  },
  methods: {
    clearCache() {
      window.localStorage.clear()
      util.Toast("缓存已清除")
    },
    logout() {
      // TODO
      this.$emit("logout")
      util.loginInfo.removeUser()

      this.$root.User.id = 0
      this.$root.User.realName = ""
      this.$root.User.token = ""
      this.$root.User.permMap = {}
      this.$root.User.IsLoggedIn = false

      /* api.Logout()
        .then((data) => {
          this.$emit("logout")
          this.$root.User.IsLoggedIn = false
          util.loginInfo.removeUser()
        })
        .catch((err) => {
          util.Toast(err)
        }) */
    },
  },
}
</script>

<style lang="stylus" scoped>

.header
  header-style()

  &-title
    font-weight: header-font-weight

.link
  display: flex
  justify-content: space-between
  padding: main-page-item-padding
  background: grey100
  border-top: 1px solid grey200
  &:active
    background: grey300

.logout
  width: 100%
  margin-top: 1rem
  padding: main-page-item-padding
  background: grey100
  text-align: center
  &:active
    background: grey300

</style>
